<template>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功" class="by-home-refresh">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item><img src="http://bfs.biyao.com/group1/M01/11/FD/rBACVF7keQaAYgr_AAA6C61jw4w937.jpg" alt=""></van-swipe-item>
                <van-swipe-item><img src="http://bfs.biyao.com/group1/M01/13/97/rBACW17kQQuAYs_iAABBu6kGbSo842.jpg" alt=""></van-swipe-item>
                <van-swipe-item><img src="http://bfs.biyao.com/group1/M01/02/10/rBACYV7XalSAP2VcAABdhDx_nWU086.jpg" alt=""></van-swipe-item>
                <van-swipe-item><img src="http://bfs.biyao.com/group1/M01/34/48/rBACYV8AQOCARbXaAABKrrlVIi0509.jpg" alt=""></van-swipe-item>
                <van-swipe-item><img src="http://bfs.biyao.com/group1/M01/13/E2/rBACW17kb8GAMo4rAABq6pfmQgs262.jpg" alt=""></van-swipe-item>
                <van-swipe-item><img src="http://bfs.biyao.com/group1/M01/D2/AC/rBACW162WxuAeBTMAABOR-yvQ5c686.jpg" alt=""></van-swipe-item>
            </van-swipe>
            <nav class="by-nav">
                <li>大牌品质</li>
                <li>/</li>
                <li>工场价格</li>
                <li>/</li>
                <li>分期支付</li>
                <li>/</li>
                <li>顺丰包邮</li>
                <li>/</li>
                <li>无忧退款</li>
            </nav>
            <van-grid class="by-grid" icon-size="0.48rem" :column-num="5" :border="false">
                <van-grid-item to="/GoodsSort/279/281" icon="http://bfs.biyao.com/group1/M00/9B/BE/rBACVF6IsFWAbsfOAAAW-6wj7Nk471.png" text="品质男孩" />
                <van-grid-item icon="http://bfs.biyao.com/group1/M01/9B/BD/rBACVF6IrzuALhPAAAAWz5ryUcQ737.png" text="定制咖啡" />
                <van-grid-item icon="http://bfs.biyao.com/group1/M00/9D/9C/rBACW16Ir2OAPGA6AAATob9apjA522.png" text="每日咖啡" />
                <van-grid-item badge="99+" icon="http://bfs.biyao.com/group1/M01/9B/BE/rBACVF6Ir4GAbFzYAAAXEsKWt18807.png" text="每日上新" />
                <van-grid-item to="/GoodsSort/652/787" icon="http://bfs.biyao.com/group1/M01/B3/73/rBACW16dZnaAXJjJAAAStrCj5PY727.png" text="生鲜直供" />
            </van-grid>

            <div class="by-home-shop-list">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    >
                    <homeShopList :swipeList="swipeList" :shopList="item.data" v-for="item in shopList" :key="item.data[0].id"></homeShopList>
                </van-list>
            </div>
        </van-pull-refresh>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import BScroll from 'better-scroll'


import homeShopList from "./homeShopList.vue"

export default {
    data(){
            return{
                isLoading: false,
                pageIndex:1,
                shopList:[],
                nav_list:[],
                list: [],
                loading: false,
                finished: false,
                isShow:false,
                who:'homeRefresh',
                swipeList:''
            }
        },
    methods: {
            onRefresh() {
                axios.post("shopList",
                    {
                        pageId:'moses:pid_25',
                        pageIndex:1,
                        pageName:"homePage",
                        platform:"mweb",
                        isTab:1,
                    }
                ).then((result)=>{
                    this.shopList = result.data.data.blockList[1].block
                    this.isLoading = false;
                })
            },
            onLoad(){
                 axios.post("shopList",
                    {
                        pageId:'moses:pid_25',
                        pageIndex:1,
                        pageName:"homePage",
                        platform:"mweb",
                        isTab:1,
                    }
                ).then((result)=>{
                    this.loading = false;
                    this.shopList = [...this.shopList , ...result.data.data.blockList[1].block]
                })
            }
        },
        async mounted() {
            await axios.post("shopList",
                {
                    pageId:'moses:pid_25',
                    pageIndex:1,
                    pageName:"homePage",
                    platform:"mweb",
                    isTab:1,
                }
            ).then((result)=>{
                this.shopList = result.data.data.blockList[1].block
                // console.log(result)
            }),
            await axios({
                    url:'/swipe',
                    methos:'get',
                    data: {
                        limit: 10,
                        filterHour: 1
                    }
                    }
                ).then((data)=>{
                    this.swipeList = data.data.data.groupList
                    
                })
                // let scroll = new BScroll('.by-home-shop-list',{
                //     scrollY: true,
                //     scrollX: true,
                //     click: true,
                //     probeType:1
                // })
                // scroll.on('scroll', (x ,y)=>{
                //     console.log(x,y)
                // })
            
        },
        
        components:{
            homeShopList,
        }
}
</script>

<style lang="stylus" scoped>
@import '~assets/border.styl' 

    .by-home-refresh
        height 100%
        width 100%
        .my-swipe
            width 100%
            height 2.6rem
            .van-swipe-item 
                width 100%
                height 100%
                img 
                    width 100%
                    height 100%
        .by-nav
            width 100%
            height 0.72rem
            color #9687a4
            display flex
            justify-content center
            align-items center
            padding 0 0.1rem
            box-sizing border-box
            font-size 0.24rem
            // border-bottom 1px solid #999999
            $border(0 0 1px 0,#999999)
            li:nth-of-type(2n)
                flex 0.5
                text-align center
            li:nth-of-type(2n+1)
                flex 1
                text-align center
        .van-grid
            width 100%
            height 1.62rem
            border-bottom 0.2rem solid #F4F4F4
        .by-home-shop-list
            width 100%
            height 100%
            border-top 0.2rem #f4f4f4 solid
</style>
